import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
  OverlayTrigger,
  Tooltip
} from 'react-bootstrap';

import "./less/project.css";

import AddProject from '../../components/project/add';

class ProjectList extends Component {

  state = {
    show: false
  }

  handleShow () {
    this.setState({
      show: true
    });
  }

  render () {
    return (
      <div>
        <div className="projectListBox">
          <h1>我的项目</h1>
          <div className="projectList">
            {Object.keys(this.props.projectList).map((projectId) => {
              let item = this.props.projectList[projectId];
              return (
                <div key={projectId} className="projectItem">
                  <Link to={"/project?pid=" + projectId}>
                    {item.icon != null ?
                      <img className="projectImage" alt={item.name} src={item.icon} />
                      :
                      <img className="projectImage" alt={item.name} src={require('./images/project_logo.png')} />
                    }
                  </Link>
                  <div className="projectButtom">
                    <Link to={"/project?pid=" + projectId}>
                      <h6 className="title">{item.name != null ? item.name : "项目" + projectId}</h6>
                    </Link>
                    {/* <OverlayTrigger
                      placement="bottom-start"
                      overlay={
                        <Tooltip>
                          退出项目
                        </Tooltip>
                      }
                    >
                      <span className="logout">&#xe602;</span>
                    </OverlayTrigger> */}
                  </div>
                </div>
              )
            })}
            {this.props.roleList.indexOf(1) >= 0 ?
              <OverlayTrigger
                placement="auto-start"
                overlay={
                  <Tooltip>
                    创建项目
                  </Tooltip>
                }>
                <div className="projectItem" onClick={this.handleShow.bind(this)}>
                  <img className="projectImage" alt={"创建项目"} src={require('./images/create_project.png')} />
                  <div className="projectButtom">
                    <h6 className="title"> </h6>
                  </div>
                </div>
              </OverlayTrigger>
              : null}
          </div>
          <AddProject
            show={this.state.show}
            handleClose={() => this.setState({ show: false })} dispatch={this.props.dispatch} />
        </div>
      </div>
    )
  }
}

function mapStateToProps (state) {
  return {
    projectList: state.project,
    roleList: state.account.roleList
  }
}

export default connect(mapStateToProps)(ProjectList);